<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">职称申报管理</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">职称申报</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 申报进度 -->
    <div>
      <el-row>
        <el-col :span="1">
          <div class="step_css">
            <el-steps direction="vertical" :active="1" space="130px">
              <el-step></el-step>
              <el-step></el-step>
              <el-step class="step_last_child"></el-step>
            </el-steps>
          </div>
        </el-col>
        <el-col :span="23">
          <!-- <div> -->
            <div>
              <!-- 上面的申报员信息 -->
              <h3>发起职称申报人员信息</h3>
              <el-form :inline="true" :model="formInline" class="demo-form-inline outline_css">
                <el-form-item label="姓名：">
                  <el-input v-model="formInline.user" placeholder="武则天"></el-input>
                </el-form-item>
                <el-form-item label="登录账号：">
                  <el-input v-model="formInline.userId" placeholder="230521199601202010"></el-input>
                </el-form-item>
                <el-form-item label="手机号码：">
                  <el-input v-model="formInline.tel" placeholder="13600000000"></el-input>
                </el-form-item>
              </el-form>
              <!-- 下面的申请报表信息 -->
              <h3>申请报表</h3>
              <!-- 卡片的导航 -->
              <div>
                <!-- :stretch="true" -->
                <el-tabs type="card" :stretch="true" v-model="checkName" @tab-click="handleClick">
                  <el-tab-pane name="n1">
                    <span slot="label" @click="sFn1">基本信息</span>
                    <!-- 这里引入基本信息组件 PersonalDataChild -->
                    <process1Z></process1Z>
                  </el-tab-pane>
                  <el-tab-pane name="n2">
                    <span slot="label" @click="sFn2">工作信息</span>
                    <!-- 这里引入组件 -->
                    <process2Z></process2Z>
                  </el-tab-pane>
                  <el-tab-pane name="n3">
                    <span slot="label" @click="sFn3">学历信息</span>
                    <!-- 这里引入组件 -->
                    <process3Z></process3Z>
                  </el-tab-pane>
                  <el-tab-pane name="n4">
                    <span slot="label" @click="sFn4">资历信息</span>
                    <!-- 这里引入组件 -->
                    <process4Z></process4Z>
                  </el-tab-pane>
                  <el-tab-pane name="n5">
                    <span slot="label" @click="sFn5">社会团体任职</span>
                    <!-- 这里引入组件 -->
                    <process5Z></process5Z>
                  </el-tab-pane>
                  <el-tab-pane name="n6">
                    <span slot="label" @click="sFn6">继续教育</span>
                    <!-- 这里引入组件 -->
                    <process6Z></process6Z>
                  </el-tab-pane>
                  <el-tab-pane name="n7">
                    <span slot="label" @click="sFn7">职业/执业资格</span>
                    <!-- 这里引入组件 -->
                    <process7Z></process7Z>
                  </el-tab-pane>
                  <el-tab-pane name="n8">
                    <span slot="label" @click="sFn8">业绩成果</span>
                    <!-- 这里引入组件 -->
                    <process8Z></process8Z>
                  </el-tab-pane>
                  <el-tab-pane name="n9">
                    <span slot="label" @click="sFn9">著作论文</span>
                    <!-- 这里引入组件 -->
                    <process9Z></process9Z>
                  </el-tab-pane>
                </el-tabs>
              </div>
              
            </div>
          <!-- </div> --><h3 style="margin-top:50px" class="step_Last_H3">用人单位审批中</h3>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import process1Z from "./process1Z";
import process2Z from "./process2Z";
import process3Z from "./process3Z";
import process4Z from "./process4Z";
import process5Z from "./process5Z";
import process6Z from "./process6Z";
import process7Z from "./process7Z";
import process8Z from "./process8Z";
import process9Z from "./process9Z";
import SeeChangeRecordVue from "../SeeChangeRecord.vue";

export default {
  data() {
    return {
      checkName: "n1",
      formInline: {
        user: "",
        userId: "",
        tel: ""
      }
    };
  },
  components: {
    process1Z,
    process2Z,
    process3Z,
    process4Z,
    process5Z,
    process6Z,
    process7Z,
    process8Z,
    process9Z
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    sFn1() {
      sessionStorage.setItem("checkName", "n1");
    },
    sFn2() {
      sessionStorage.setItem("checkName", "n2");
    },
    sFn3() {
      sessionStorage.setItem("checkName", "n3");
    },
    sFn4() {
      sessionStorage.setItem("checkName", "n4");
    },
    sFn5() {
      sessionStorage.setItem("checkName", "n5");
    },
    sFn6() {
      sessionStorage.setItem("checkName", "n6");
    },
    sFn7() {
      sessionStorage.setItem("checkName", "n7");
    },
    sFn8() {
      sessionStorage.setItem("checkName", "n8");
    },
    sFn9() {
      sessionStorage.setItem("checkName", "n9");
    }
  },
  mounted() {
    this.checkName = sessionStorage.getItem("checkName") || "n1";
    sessionStorage.setItem("fName", "CheckProcess");
  }
};
</script>
<style scoped lang="less">
.h_box {
  position: relative;
  .step_Last_H3 {
    position: absolute;
    left: 10px;
    bottom: 0;
  }
}
h3 {
  margin: 20px 0;
  color: #444;
}
.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}
.el-tabs__nav {
  .el-tabs__item {
    border: none !important;
  }
}

.step_css {
  margin-top: 20px;
  // position: relative;
  .step_last_child {
    position: absolute;
    left: 10px;
    bottom: 20px;
    // margin-top: 850px;
  }
}
.outline_css {
  .el-input {
    // border: 0 !important;
    border: none !important;
    border-style: none;

    margin-right: 20px;
  }
}
</style>